<template>
	<view class="myinfo">
		<view class="get_info">
			<view class="flex_left_right avator gdis">
				<image class="goods_img" :src='avatarUrl' mode="aspectFill"></image>

				 <view class="align_center gray_font" @tap="showUpload('open')">
					<text class="fs-13">修改头像</text>
					<text class="iconfont iconfanhui t-180"></text>
				</view> 
			</view>
			<view class="flex_left_right gdis">
				<text>昵称</text>
				<input type="text"  v-model="personInfo.nickname" class="right gray_font"  />
			</view>
			<view class="flex_left_right gdis" v-if="personInfo.audit_status">
				<text>姓名</text>
				<text style="width: 600rpx;color: #999;" class="right gray_font">{{personInfo.name}}</text>
			</view>
			<view class="flex_left_right gdis">
				<text>手机号</text>
				<input type="number" v-model="personInfo.mobile" class="right gray_font" disabled />
			</view>
			<view class="flex_left_right gdis" v-if="personInfo.audit_status">
				<text>性别</text>
				<text style="width: 600rpx;color: #999;" class="right gray_font">
					<text v-if="personInfo.sex==1">男</text>
					<text v-else>女</text>
				</text>
			</view>
		    <view class="rl_box" v-if="personInfo.audit_status">
		    	<view class="bz_box b_flex_c">
		    		<view>人脸图片 <text class="msg">(200kb以内格式jpg)</text></view>
		    	</view>
		    	<view class="upload_box">
		    		<imgUpload :maxSize="204800" :limitType="['jpg']" :maxCount="1" v-model="personInfo.urls"></imgUpload>
		    	</view>
		    </view> 
			
			<view class="flex_left_right gdis" v-if="personInfo.rstatus==4">
				<text>人脸下发失败</text>
				<input type="number" v-model="personInfo.rtext" class="right gray_font" disabled />
			</view>
			
			
		</view>
		<view class="center button_style" @click="formSubmit">保存</view>
		
		<view class="center layout" @click="tui">退出登录</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="upload-img">
				<view class="white_b r-10">
					<view class="border method" @click="chooseImage('album')">本地上传</view>
					<view class="method" @click="chooseImage('camera')">拍照上传</view>
				</view>
				<view class="white_b method r-10 cancel" @click="showUpload('close')">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import imgUpload from "@/components/imgUpload.vue";
	const app = getApp().globalData;
	const {
		imgRemote,
	} = app;
	export default {
		components: {
			imgUpload
		},
		data() {
			return {
				imgRemote: imgRemote,
				avatarUrl: '',
				personInfo: {urls:'',audit_status:''},
				file: '',
				url:''
			};
		},
		methods: {
			tui(){
				this.$showModal('确认退出登录?',()=>{
					uni.setStorageSync('userToken','');
					 uni.switchTab({
					 	url:'/pages/tabar/user'
					 })
				});
			},
			lookImg(index){
			uni.previewImage({
			  urls:this.personInfo.audit.iimages,
			  current: index
			});	
			},
			memberInfo() {
				let params = {
					token: uni.getStorageSync('userToken')
				}
				this.$get(this.$api.userInfo, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						let urls=data.data.urls;
						
						data.data.urls='';
						
						this.personInfo = data.data;
						
						setTimeout(()=>{
							this.personInfo.urls=urls;
						},100);
						
						if(data.data.avatar.match('xml;base64')){
							this.avatarUrl='../../static/img/avatar.png'
						}else{
							this.avatarUrl = data.data.avatar;
						}
						
					}
				})
			},
			showUpload(way) {
				if (way == 'open') {
					this.$refs.popup.open();
				} else {
					this.$refs.popup.close();
				}
			},
			chooseImage(type) {
				let _ = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: [type], //从相册选择
					success(res) {
						_.file = res.tempFilePaths[0];
						_.$refs.popup.close();
						_.uploadImg()
					}
				});
			},
			uploadImg() {
				let _ = this;
				uni.uploadFile({
					url: getApp().globalData.rootUrl + _.$api.mainUpload, //此处换上你的接口地址
					name: 'file',
					filePath: _.file,
					success: function(res1) {
						_.avatarUrl = _.imgRemote + JSON.parse(res1.data).data;
						_.url=JSON.parse(res1.data).data;
					}
				})
			},
			formSubmit() {
				this.$showModal('确认修改信息', () => {
					let params = {
						avatar: this.url,
						nickname:this.personInfo.nickname,
						urls:this.personInfo.urls
					}
					this.$get(this.$api.userProfile, params, (res) => {
						if (res.data.code == 1) {
							this.$Toast('修改成功');
							setTimeout(() => {
								uni.navigateBack();
							}, 1000)
						} else {
							this.$Toast(res.data.msg);
						}
					})
				})
			}
		},
		onLoad() {
			var that = this;
			that.memberInfo();
		}
	};
</script>

<style lang="scss" scoped>
	.myinfo {
		height: 100vh;
		background: white;
	}

	.myinfo .get_info {
		background: white;
		padding: 0 20rpx;
	}

    .rl_box{
		box-sizing: border-box;
		padding: 20rpx 0;
	}

       .gdis{
		   display: flex;
		   height: 88rpx;
		   align-items: center;
		   border-bottom: 1px solid #f7f6f6;
	   }

	

	.myinfo .get_info>view>text {
		width: 250rpx;
		color: #333;
	}

   .layout{
	   margin:30rpx 30rpx 0 30rpx ;
	   border-radius: 45rpx;
	   
	   height: 90rpx;
	   line-height: 90rpx;
	   border: 1rpx solid #DEDEDE;
   }

	.myinfo .button_style {
		margin:30rpx 30rpx 0 30rpx ;
		border-radius: 45rpx;
		
		height: 90rpx;
		line-height: 90rpx;
		background: #e34b0f;
		color: #fff;
	}

	.myinfo .get_info .avator {
		height: 182rpx;
	}

	.myinfo .avator image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}

	.upload-img {
		margin: 0 30rpx;

		.method {
			height: 109rpx;
			line-height: 109rpx;
			text-align: center;
		}

		.cancel {
			margin: 30rpx 0;
		}
	}
	.iimages{
		width: 80rpx;
		height: 80rpx;
		margin-right: 15rpx;
	}
</style>
